<template>
	<view class="container">
		<view class="box">
			<view class="bg-white block">
				<view class="flex flex-wrap myVideoBox">
					<video id="myVideo" class="myVideo" :src="trainInfo.file_path"
						controls  @timeupdate="controlFun"></video>
				</view>
				<view class="flex flex-wrap text-black text-lg text-title">
					<view >{{trainInfo.title}}</view>
					<view class="sub-title text-gray"><image src="/static/images/play@2x.png" class="png" mode="aspectFit"></image>{{trainInfo.view}}</view>
				</view>
				<view class="flex flex-wrap text-gray text-lg">
					
				</view>
				
			</view>
			<view class="uni-padding-wrap bg-white margin-tb-lg margin-lr-sm text-body">
				<view class="uni-common-mt">
					<view class="head-title">
						
						<image src="/static/images/biaoqian.png" class="biaoqian png" mode="aspectFit"></image>
						<image src="/static/images/shuben.png" class="shuben png" mode="aspectFit"></image>
						</view>
					<view class="html"><rich-text  :nodes="trainInfo.content"></rich-text></view>
					
				</view>
			</view>
		</view>
		<view class="flex flex-wrap text-black text-lg pay-row" >
			<view class="price">￥{{trainInfo.price}}</view>
			<button class="pay action-btn" @click="gobuy" v-if="buyItem.pay_status!=2">立即购买</button>
			<button class="payed action-btn" v-else>已购买</button>
		</view>
	<goBuy ref="goBuy" :contentHeight="660" :buyItem="buyItem" @eventPay="payed($event)"
	></goBuy>
	<!-- 绑定 -->
	<goReg ref="goReg" :contentHeight="580"></goReg>
	</view>
	
</template>

<script>

import goBuy from "@/components/gobuy";
import goReg from "@/components/goReg";

	export default {
		components: {
			goBuy,
			goReg,
		},
		data() {
			return {
				trainInfo:[],
				loaded:false,
				loadingType: 'more',
				titleNViewBackground: '#FFF',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				buyItem:{
					id:12,
					price:3.12,
					pay_status:1,
					},
				videoContext:'',
				worksList: [],
				strings: '<div style="text-align:center;">求职规则必读求职规则必读求职规则必读求职规则必读<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"/></div>',
			};
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onLoad() {
			let trainInfo = uni.getStorageSync('trainInfo');
			this.trainInfo = trainInfo;
			this.buyItem.id=trainInfo.id
			
			this.buyItem.price=trainInfo.price
			this.buyItem.pay_status=2
			// this.buyItem.pay_status=trainInfo.is_buy
			
			console.log(this.trainInfo)
			// this.loadData();
		},
		methods: {
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			
			loadData() {
				
				
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			gobuy(){
				let uId = uni.getStorageSync('userId');
				// let uId =1;
				if(uId>"0"&&uId!=undefined){
					this.$refs.goBuy.toggleMask();	
					return;
				}
				
				this.$refs.goReg.showModal('regModal');	
				return;
				
			},
			controlFun(e){
				// console.log(111)
				// let pay_stauts = this.obj.pay_status
				let time = e.detail.currentTime.toFixed(0);
				// if(pay_stauts==2){
				// return
				// }
				// // console.log(time)
				if(time > 2&&this.buyItem.pay_status==1){
					this.videoContext.pause();
					// this.$api.msg('试看结束，请购买后观看完整课程')
					uni.showToast({
						title:'试看结束，请购买后观看完整课程',
						icon:'none',
					})
				}
			},
			//购买组件返回的已支付事件响应
			payed(data){
				console.log('已购买，继续播放')
				console.log(this.buyItem)
				this.buyItem = data;
				this.videoContext.play();
			},
			//详情页
			navToDetailPage(item) {
				if(!this.hasLogin){
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				// uni.showToast({
				// 	title: `功能开发中...`,
				// 	icon: 'none'
				// })
				// return
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/works/detail?id=${id}`
				})
			},
		},
		
	}
</script>

<style lang="scss">
	/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
		}
	}
	page{
		.cate-section{
			position:relative;
			z-index:5;
			border-radius:16upx 16upx 0 0;
			margin-top:-20upx;
		}
		.carousel-section{
			padding: 0;
			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}
			.carousel{
				.carousel-item{
					padding: 0;
				}
			}
			.swiper-dots{
				left:45upx;
				bottom:40upx;
			}
		}
	}
	/* #endif */
	.container{
		padding-top: 0px;
	}
	.flex-wrap{
		color: #222 !important;
	}
	.text-title{
		font-size: 16px;
		font-weight: bold;
		list-style: 64px;
		height: 30px;
		justify-content: space-between;
		align-content: center;
	}
	.sub-title{
		font-size: 12px;
		height: 20px;
	}
	.text-body{
		border-radius: 6px;
	}
	.basis-xs{
		flex-basis: 25%;
		padding: 10px 0;
	}
	.basis-xs20{
		flex-basis: 20%;
	}
	.basis-row{
		flex-basis: 100%;
	}
	.myVideo{
		width: 100%;
		height: 240px;
	}
	.myVideoBox{
		margin: 0 !important;
	}
	uni-video{
		width: 100%;
	}
	.company-img{
		width: 64px;
		height: 64px;
	}
	
	.box{
		position: fixed;
		left: 0;
		z-index: 990;
		width: 100%;
		.flex{
			margin: 0 15px;
		}
	}
	.sub-title{
		image{
			display: inline-block;
			margin-right: 5px;
			width: 15px;
			height: 15px;
			vertical-align: middle;
		}
	}
	page {
		background: #f5f5f5;
	}
	.html{
		height: 300px;
		padding: 5px;
		overflow-y: scroll;
	}
	.head-title{
		font-size: 16px;
		font-weight: bold;
		height: 50px;
		color: #0081FF;
		text-align: center;
		display: flex;
		justify-content: space-between;
		.biaoqian{
			width: 40px;
			height: 45px;
			margin-left: 10px;
		}
		.shuben{
			width: 90px;
			height: 90px;
			top: -25px;
		}
	}
	.m-t{
		margin-top: 16upx;
	}
	.pay-row{
		position: fixed;
		margin: 0 !important;
		bottom: 0;
		width: 100%;
		background: #FFF;
		z-index:998;
		.price{
			margin-left: 20px;
			color:gray;
			line-height: 50px;
			width: 40%;
		}
	}
	
	.max-width{
		max-width: 250px;
		overflow: hidden;
	}
	.position{
		color: #222 !important;
		font-size: 16px !important;
		margin: 0 !important;
		font-weight: bold;
		justify-content: space-between;
	}
	.item>.flex .subText{
		margin: 0 10px;
		height: 50px;
		border-bottom: 1px solid #4CA5FE;
	}
	
	.flex{
		margin: 0 10px;
	}
	
	.reward{
		color: #FF4400;
		font-size: 20px;
		text-align: right;
		top: -7px;
		position: relative;
	}
	.action-btn{
		height: 40px;
		padding: 5px 0;
		margin-top: 5px;
		width: 150px;
		background:#FE7D4C;
		border-radius: 4rem;
		font-size:16px;
		line-height: 28px;
		color:white;
	}
	.payed{
		background:#BBBBBB;
	}
	.line{
		margin-top: 5px;
		border-top: 1px solid #4CA5FE;
	}
	
	.cu-avatar{
		width: 50upx;
		height: 50upx;
	}
	.company{
		color: #BAC2D2;
		font-size:14px;
		line-height: 30px;
	}
	.action-box{
		text-align: right;
	}
	.join-btn{
		width: 90px;
		font-size: 16px;
	}
	
	

</style>
